import React from 'react';
import { Card, List } from 'antd';
import styles from './styles.less';

const EarlyWarning = ({ data = [] }) => (
    <Card title="预警列表" bordered={false} style={{ height: '220px' }} className={styles.card}>
        <List
            itemLayout="horizontal"
            dataSource={data.filter((item, index) => index < 4)}
            split={false}
            className={styles.list}
            renderItem={(item, index) => (
                <List.Item key={item.id}>
                    <List.Item.Meta
                        avatar={
                            <div className={`${styles.warnIndex} ${index > 2 ? styles.warnFour : styles.warn}`}>
                                {index + 1}
                            </div>
                        }
                        title={<p className={styles.warnList}>{item.warnTitle}</p>}
                    />
                </List.Item>
            )}
        />
    </Card>
);

export default EarlyWarning;
